<template>
    <div>
      <p class="title">当前待发卡人共10个；当前剩余10个未发卡</p>
      <div class="content">
        <p>当前发卡人信息</p>
        <div class="main">
          <div>
            <div>
              <img src="" alt="">
            </div>
          </div>
          <div>
            <p>姓名：陈佩佩</p>
            <p>学号：2011010107</p>
            <p>证件号 <br/>
              622727189852415200</p>
            <p>性别：男</p>
          </div>
        </div>

      </div>
      <el-form ref="form" :model="form" label-width="40px">
        <el-form-item label="卡号">
          <el-input v-model="form.name" placeholder="请输入卡号" size="mini"></el-input>
        </el-form-item>
      </el-form>
      <p>提示：请放卡...</p>

      <el-button class="btn" type="primary">取消</el-button>
    </div>
</template>

<script>
    export default {
        name: "edit",
        data(){
            return{
                form:{
                    name:''
                }
            }
        }
    }
</script>

<style scoped lang="scss">
  .btn{
    display: block;
    margin: 0 auto;
  }
  .main{
    display: flex;
    padding-bottom: 20px;
    &>div{
      flex: 1;
    }
    &>div:first-child{
      div{
        width: 80%;
        height: 98%;
        background: #fff;
        margin-left: 10px;
      }
    }
  }
  .content{
    box-sizing: border-box;
    background: #f2f2f2;
    &>p{
      font-weight: bold;
      padding: 10px;
      border-bottom: 1px solid #e5e5e5;
    }
  }
  .title{
    position: relative;
    padding-left: 10px;
  }
  .title:before{
    content: '';
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #009dda;
    position: absolute;
    top: 4px;
    left: -5px;
  }
</style>
